<template>
  <div class="home_container">
    <div class="top">
      <div class="top_box">
        <h1>通讯录</h1>
        <p>基于vue,springboot的通讯录系统，作者：LK</p>
      </div>
    </div>
    <div class="w">
      <el-row :gutter="20" class="t_top" type="flex" justify="center">
  <el-col :span="2">
    <el-button>按姓名查询</el-button>
  </el-col>
  <el-col :span="8">
    <el-input v-model="queryInfo.query" placeholder="请输入内容"></el-input>
  </el-col>
  <el-col :span="2">
     <el-button type="primary" @click="getserach">查询</el-button>
  </el-col>
    <el-col :span="6">
     <el-button type="primary" @click="adduser">添加</el-button>
  </el-col>


</el-row>
      <!-- 表格 -->
        <el-table
    :data="hometableData"
    border
    class="t_top"
    style="width: 100%">
     <el-table-column
      type="index"
      label="#"
      >
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
     >
    </el-table-column>
    <el-table-column
      prop="gender"
      label="性别"
   >
    </el-table-column>
    <el-table-column
      label="出生日期">
      <template slot-scope="scope">
          {{ scope.row.birthday | dataFormate }}
      </template>
    </el-table-column>
        <el-table-column
      prop="address"
      label="家庭住址">
    </el-table-column>
      <el-table-column
      prop="phoneNum"
      label="电话">
    </el-table-column>
        <el-table-column
      prop="company"
      label="公司">
    </el-table-column>
            <el-table-column
      label="添加">
      <template slot-scope="scope">
           <el-button type="primary" size="mini" @click="updateuser(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteuser(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
     <el-pagination
     class="t_top"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[3, 5, 7, 15]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <!-- 对话框，用来添加用户数据的 -->
    <el-dialog
  title="添加用户信息"
  :visible.sync="adddialogVisible"
  width="50%">
 <!-- 表单添加数据 -->
 <el-form :model="addruleForm" :rules="addrules" ref="addruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名称" prop="username">
    <el-input v-model="addruleForm.username"></el-input>
  </el-form-item>
    <el-form-item label="性别" prop="gender">
    <el-input v-model="addruleForm.gender"></el-input>
  </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
    <el-input v-model="addruleForm.birthday"></el-input>
  </el-form-item>
        <el-form-item label="家庭住址" prop="address">
    <el-input v-model="addruleForm.address"></el-input>
  </el-form-item>
          <el-form-item label="电话" prop="phoneNum">
    <el-input v-model="addruleForm.phoneNum"></el-input>
  </el-form-item>
            <el-form-item label="公司" prop="company">
    <el-input v-model="addruleForm.company"></el-input>
  </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetadd">取 消</el-button>
    <el-button type="primary" @click="resultuser">确 定</el-button>
  </span>
</el-dialog>
   <!-- 对话框，用来修改用户数据的 -->
    <el-dialog
  title="修改用户信息"
  :visible.sync="updatedialogVisible"
  width="50%">
 <!-- 表单添加数据 -->
 <el-form :model="updateruleForm" ref="updateruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名称" prop="username">
    <el-input v-model="updateruleForm.username"></el-input>
  </el-form-item>
    <el-form-item label="性别" prop="gender">
    <el-input v-model="updateruleForm.gender"></el-input>
  </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
    <el-input v-model="updateruleForm.birthday"></el-input>
  </el-form-item>
        <el-form-item label="家庭住址" prop="address">
    <el-input v-model="updateruleForm.address"></el-input>
  </el-form-item>
          <el-form-item label="电话" prop="phoneNum">
    <el-input v-model="updateruleForm.phoneNum"></el-input>
  </el-form-item>
            <el-form-item label="公司" prop="company">
    <el-input v-model="updateruleForm.company"></el-input>
  </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="updatereset">取 消</el-button>
    <el-button type="primary" @click="updatereseult">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
// 导入格式工具的插件
// import moment from 'moment'
export default {
  data() {
    return {
      total: 0,
      hometableData: [],
      queryInfo: {
          pageNum: 1,
          pageSize: 5,
          query: ''
      },
      serachInput: '',
      adddialogVisible: false,
      addruleForm: {
        address: '',
        birthday: '',
        company: '',
        gender: '',
        id: 0,
        organize: '',
        phoneNum: '',
        username: ''
      },
      addrules: {
        username: [
          {
              required: true,
              message: '请输入用户名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
        ],
        gender: [
               {
              required: true,
              message: '请输入性别',
              trigger: 'blur'
            }
        ],
        birthday: [
              {
              required: true,
              message: '请输入生日',
              trigger: 'blur'
            }
        ],
        address: [
                {
              required: true,
              message: '请输入住址',
              trigger: 'blur'
            }
        ],
        phoneNum: [
            {
              required: true,
              message: '请输入电话',
              trigger: 'blur'
            }
        ],
        company: [
          {
              required: true,
              message: '请输入公司',
              trigger: 'blur'
            }
        ]
      },
      updatedialogVisible: false,
      updateruleForm: {
        address: '',
        birthday: '',
        company: '',
        gender: '',
        id: 0,
        organize: '',
        phoneNum: '',
        username: ''
      }
    }
  },
  created() {
    this.getdatalist()
  },
  methods: {
    // 获取数据
   async getdatalist() {
      const Result = await this.$http.post('getPhoneBooks', this.queryInfo)
      console.log(Result)
      if (Result.status !== 200) {
        return this.$message.error('获取信息失败')
      }
      this.total = Result.data.numbers
      this.hometableData = Result.data.data
      // console.log(this.hometableData)
    },
    // 删除数据
   async deleteuser(info) {
      const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => err)
        if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
    const res = await this.$http.post(`deletePhongBook?id=${info}`)
    // console.log(res)
    if (res.status !== 200) {
      return this.$message.error('删除失败')
    }
     this.getdatalist()
    },
    // 检索数据
  async getserach() {
      const Result = await this.$http.post('getPhoneBooks', {
        pageNum: this.queryInfo.pageNum,
        pageSize: this.queryInfo.pageSize,
        query: this.queryInfo.query.trim()
      })
      console.log(Result)
      if (Result.status !== 200) {
        return this.$message.error('获取信息失败')
      }
      this.total = Result.data.numbers
      this.hometableData = Result.data.data
  },
  // 添加数据
  adduser() {
    this.adddialogVisible = true
  },
  // 取消添加数据
  resetadd() {
    this.adddialogVisible = false
    this.$refs.addruleForm.resetFields()
  },
  // 确认添加
  async resultuser() {
    // 先进行表单的预先验证
    this.$refs.addruleForm.validate(async validate => {
      if (!validate) {
        return this.$message.error('请输入合法的用户信息')
      }
      // 成功后发送请求
    const Result = await this.$http.post('addPhoneBook', this.addruleForm)
    console.log(Result)
    if (Result.status !== 200) {
      return this.$message.error('添加失败')
    }
    this.$message.success('添加成功')
     this.getdatalist()
     this.adddialogVisible = false
    })
  },
  // 修改用户数据
  updateuser(info) {
    this.updatedialogVisible = true
    console.log(info)
    this.updateruleForm = info
  },
  // 取消修改
  updatereset() {
    this.updatedialogVisible = false
  },
  // 确认修改
  async updatereseult() {
   const Result = await this.$http.post('UpdatePhoneBook', this.updateruleForm)
   console.log(Result)
   if (Result.status !== 200) {
     return this.$message.error('修改失败')
   }
   this.$message.success('修改成功')
   this.updateuser(Result.config.data)
   this.updatedialogVisible = false
  },
  // 页面显示的数据条数改变
  handleSizeChange(newsize) {
    console.log(newsize)
    this.queryInfo.pageSize = newsize
    this.getdatalist()
  },
  // 页数发生变化
  handleCurrentChange(newPage) {
    console.log(newPage)
    this.queryInfo.pageNum = newPage
     this.getdatalist()
  }
  }
}
</script>

<style lang="less" scoped>
.home_container {
  .top {
    position: relative;
    height: 200px;
    // line-height: 200px;
    background-color: #e8ecef;
    // text-align: center;
    .top_box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      height: 100px;
      width: 600px;
      letter-spacing: .5em;
     h1 {
       height: 50px;
     }
    }
  }
  .w {
    width: 1400px;
    margin: auto;
  }
  .t_top {
    margin-top: 10px !important;
  }
}
</style>